<template>
  <div>
    <el-row>
      <p class="el-descriptions__title">年度分析</p>
      <el-divider />
      <el-row class="row">
        <el-col class="title" :span="24">
          <span class="dividerVertical"></span>
          <h1>中间/国际业务汇总</h1>
        </el-col>
        <el-col :span="12" class="col" >
          <div class="lineChar" id="echartLineAmount"></div>
        </el-col>
        <el-col :span="12" class="col" >
          <div class="lineChar" id="echartLineNum"></div>
        </el-col>

        <el-col class="title" :span="24">
          <span class="dividerVertical"></span>
          <h1>全行年度业务情况</h1>
        </el-col>

        <el-col :span="24" class="col" >
          <div class="barChar" id="echartYearAmount"></div>
        </el-col>
      </el-row>
    </el-row>
    <el-row>
      <p class="el-descriptions__title">资金渠道信息</p>
      <el-divider />
      <el-row class="row monthAnalzeRow">
        <el-col :span="6">
          <p class="title">
           <h6>统计月份</h6><el-date-picker v-model="dataMonth" type="month" placeholder= "选择月份"/>
          </p>
          <el-row class="titleRow">
            <el-col class="col" :span="8">业务类型</el-col>
            <el-col class="col" :span="8">流进金额</el-col>
            <el-col class="col" :span="8">流出金额</el-col>
          </el-row>
          <el-row @click="dateClick(item)" v-for="(item, index) in dataItems" :key="index" class="titleRow listRow " :class="{isSel:item.sel}">
            <el-col class="col" :span="8">{{item.title}}</el-col>
            <el-col class="col" :span="8">{{item.inNum}}</el-col>
            <el-col class="col" :span="8">{{item.outNum}}</el-col>
          </el-row>
        </el-col>
        <el-col :span="18">
          <div class="monthLineChar" id="echartMonthLineAmount"></div>
        </el-col>
      </el-row>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import * as echarts from "echarts";
// import {mounted} from 'vue'
const dataMonth = ref('')
const chartOptions = reactive(
  {
    commandLineAmountChartOption: {
        title: {
          show: true,
          text: "月累计交易金融(单位:万元)",
          textStyle: {
            fontSize: 14
          }
        },
        grid: {
          right: 5,
          left: 100,
          bottom: 80,
        },
        xAxis: {
          data:['1月', '2月', '3月', '4月', '5月', '6月', '7月','8月', '9月', '10月', '11月','12月'],
          axisTick: {
            show: false,
          },
          axisLine: {
            lineStyle: {
              // x轴线条颜色
              color: "#f3f3f3",
              width: 2,
            },
          },
          axisLabel: {
            // x轴刻度字体颜色
            color: "#333",
            fontSize: 14,
            fontWeight: 500,
          },
        },
        yAxis: {
          // 单位(元)
          type: "value",
          name: "",
          axisTick: {
            show: false,
          },
          axisLabel: {
            color: "#333",
            fontSize: 14,
            fontWeight: 500,
          },
          axisLine: {
            show: false,
          },
          splitLine: {
            lineStyle: {
              color: "#f3f3f3",
              width: 2,
            },
          },
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "none",
          },
          backgroundColor: "#fff",
          textStyle: {
            color: "#333",
            fontSize: 14,
          },
          extraCssText:
            "box-shadow: 0 0 20px rgb(195, 219, 248, 1);border-radius: 10px;padding: 15px 10px",
        },
        legend: {
          show: true,
        },
        series: [
          {
            data:[120, 132, 101, 134, 90, 230, 210, 134, 90, 230, 210,134],
            type: "line",
            name: "中间业务交易金额",
            itemStyle: {
              normal: {
                color: "#336beb",
                lineStyle: {
                  width: 3,
                },
              },
            },
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "#c3dbf8",
                  },
                  {
                    offset: 1,
                    color: "#fff",
                  },
                ]),
              },
            },
          },
          {
            data:[140, 112, 81, 164, 80, 180, 160, 154, 130, 180, 170,144],
            type: "line",
            name: "国际业务交易金额",
            itemStyle: {
              normal: {
                color: "#336beb",
                lineStyle: {
                  width: 3,
                },
              },
            },
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "#c3dbf8",
                  },
                  {
                    offset: 1,
                    color: "#fff",
                  },
                ]),
              },
            },
          },
        ],
    },
    commandLineNumChartOption: {
        title: {
          show: true,
          text: "月累计交易笔数",
          textStyle: {
            fontSize: 14
          }
        },
        grid: {
          right: 5,
          left: 100,
          bottom: 80,
        },
        xAxis: {
          data:['1月', '2月', '3月', '4月', '5月', '6月', '7月','8月', '9月', '10月', '11月','12月'],
          axisTick: {
            show: false,
          },
          axisLine: {
            lineStyle: {
              // x轴线条颜色
              color: "#f3f3f3",
              width: 2,
            },
          },
          axisLabel: {
            // x轴刻度字体颜色
            color: "#333",
            fontSize: 14,
            fontWeight: 500,
          },
        },
        yAxis: {
          // 单位(元)
          type: "value",
          name: "",
          axisTick: {
            show: false,
          },
          axisLabel: {
            color: "#333",
            fontSize: 14,
            fontWeight: 500,
          },
          axisLine: {
            show: false,
          },
          splitLine: {
            lineStyle: {
              color: "#f3f3f3",
              width: 2,
            },
          },
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "none",
          },
          backgroundColor: "#fff",
          textStyle: {
            color: "#333",
            fontSize: 14,
          },
          extraCssText:
            "box-shadow: 0 0 20px rgb(195, 219, 248, 1);border-radius: 10px;padding: 15px 10px",
        },
        legend: {
          show: true,
        },
        series: [
          {
            data:[120, 132, 101, 134, 90, 230, 210, 134, 90, 230, 210,134],
            type: "line",
            name: "中间业务交易数量",
            itemStyle: {
              normal: {
                color: "#336beb",
                lineStyle: {
                  width: 3,
                },
              },
            },
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "#c3dbf8",
                  },
                  {
                    offset: 1,
                    color: "#fff",
                  },
                ]),
              },
            },
          },
          {
            data:[140, 112, 81, 164, 80, 180, 160, 154, 130, 180, 170,144],
            type: "line",
            name: "国际业务交易数量",
            itemStyle: {
              normal: {
                color: "#336beb",
                lineStyle: {
                  width: 3,
                },
              },
            },
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "#c3dbf8",
                  },
                  {
                    offset: 1,
                    color: "#fff",
                  },
                ]),
              },
            },
          },
        ],
    },
    commandBarChartOption: {
      title: {
        show: true,
        text: "月累计交易金额(单位:万元)",
        textStyle: {
          fontSize: 14
        }
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      legend: {},
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: [
        {
          type: 'category',
          data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
          axisLine: {
            lineStyle: {
              // x轴线条颜色
              color: "#f3f3f3",
              width: 2,
            },
          },
          axisLabel: {
            // x轴刻度字体颜色
            color: "#333",
            fontSize: 14,
            fontWeight: 500,
          },
        }
      ],
      yAxis: [
        {
          type: 'value'
        }
      ],
      series: [
        {
          name: '存款余额',
          type: 'bar',
          emphasis: {
            focus: 'series'
          },
          stack: 'Ad',
          data: [320, 332, 301, 334, 390, 330, 320,120, 132, 101, 134, 90,]
        },
        {
          name: '贷款余额',
          type: 'bar',
          emphasis: {
            focus: 'series'
          },
          stack: 'Ad',
          data: [120, 132, 101, 134, 90, 230, 210,320, 332, 301, 334, 390,]
        },
        {
          name: '资产余额',
          type: 'bar',
          emphasis: {
            focus: 'series'
          },
          stack: 'Ad',
          data: [220, 182, 191, 234, 290, 330, 310,232, 201, 154, 190, 330,]
        },
        {
          name: '理财余额',
          type: 'bar',
          emphasis: {
            focus: 'series'
          },
          stack: 'Ad',
          data: [150, 232, 201, 154, 190, 330, 410,91, 234, 290, 330, 310]
        },
        {
          name: '基金余额',
          type: 'bar',
          emphasis: {
            focus: 'series'
          },
          stack: 'Ad',
          data: [862, 1018, 964, 1026, 1679, 1600, 1570,732, 701, 734, 1090, 1130,]
        },
        {
          name: '代销理财余额',
          type: 'bar',
          emphasis: {
            focus: 'series'
          },
          stack: 'Ad',
          data: [620, 732, 701, 734,1026, 1679, 1600, 1570,732, 1090, 1130, 1120]
        },
        {
          name: '信托资管余额',
          type: 'bar',
          emphasis: {
            focus: 'series'
          },
          stack: 'Ad',
          data: [120, 132, 101, 134,71, 74, 190, 130, 110, 290, 230, 220]
        },
        {
          name: '保险当年余额',
          type: 'bar',
          emphasis: {
            focus: 'series'
          },
          stack: 'Ad',
          data: [60, 72, 71, 82, 91, 84, 109, 110,74, 190, 130, 110]
        },
        {
          name: '贵金属当年余额',
          type: 'bar',
          emphasis: {
            focus: 'series'
          },
          stack: 'Ad',
          data: [62, 82, 91,132, 101, 134,71, 74, 84, 109, 110, 120]
        }
      ]
    },

    commandMonthLineChartOption: {
        title: {
          show: true,
          text: "客户资金流向趋势图(单位:元)",
        },
        grid: {
          right: 5,
          left: 100,
          bottom: 80,
        },
        xAxis: {
          data:['202303', '202304', '202305', '202306', '202307', '202308', '202309'],
          axisTick: {
            show: false,
          },
          axisLine: {
            lineStyle: {
              // x轴线条颜色
              color: "#f3f3f3",
              width: 2,
            },
          },
          axisLabel: {
            // x轴刻度字体颜色
            color: "#333",
            fontSize: 14,
            fontWeight: 500,
          },
        },
        yAxis: {
          // 单位(元)
          type: "value",
          name: "",
          axisTick: {
            show: false,
          },
          axisLabel: {
            color: "#333",
            fontSize: 14,
            fontWeight: 500,
          },
          axisLine: {
            show: false,
          },
          splitLine: {
            lineStyle: {
              color: "#f3f3f3",
              width: 2,
            },
          },
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "none",
          },
          backgroundColor: "#fff",
          textStyle: {
            color: "#333",
            fontSize: 14,
          },
          extraCssText:
            "box-shadow: 0 0 20px rgb(195, 219, 248, 1);border-radius: 10px;padding: 15px 10px",
        },
        legend: {
          show: true,
        },
        series: [
          {
            data:[120, 132, 101, 134, 90, 230, 210],
            type: "line",
            name: "支付宝资金流出",
            itemStyle: {
              normal: {
                color: "#336beb",
                lineStyle: {
                  width: 3,
                },
              },
            },
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "#c3dbf8",
                  },
                  {
                    offset: 1,
                    color: "#fff",
                  },
                ]),
              },
            },
          },
          {
            data:[220, 182, 191, 234, 290, 330, 310],
            type: "line",
            name: "支付宝资金流入",
            itemStyle: {
              normal: {
                color: "#336beb",
                lineStyle: {
                  width: 3,
                },
              },
            },
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "#c3dbf8",
                  },
                  {
                    offset: 1,
                    color: "#fff",
                  },
                ]),
              },
            },
          },
        ],
    },
  }
)
const dataItems = ref([
  {sel:true,title:'支付宝',inNum:'886876',outNum:'878364'},
  {sel:false,title:'基金',inNum:'886876',outNum:'878364'},
  {sel:false,title:'理财',inNum:'886876',outNum:'878364'},
  {sel:false,title:'手机银行',inNum:'886876',outNum:'878364'},
])
const dateClick = (item) => {
  dataItems.value.forEach(element => {
    element.sel = false
  })
  item.sel = !item.sel
}
onMounted(() => {
    const echartLineAmount = document.getElementById("echartLineAmount");
    const lineAmountChart = echarts.init(echartLineAmount);
    lineAmountChart.setOption(chartOptions.commandLineAmountChartOption);
    const echartLineNum = document.getElementById("echartLineNum");
    const lineNumChart = echarts.init(echartLineNum);
    lineNumChart.setOption(chartOptions.commandLineNumChartOption);
    

    const echartYearAmount = document.getElementById("echartYearAmount");
    const barYearChart = echarts.init(echartYearAmount);
    barYearChart.setOption(chartOptions.commandBarChartOption);

    const echartMonthLineAmount = document.getElementById("echartMonthLineAmount");
    const monthLinChart = echarts.init(echartMonthLineAmount);
    monthLinChart.setOption(chartOptions.commandMonthLineChartOption);
  })
  // mounted(){
  // }

</script>

<style scoped lang="scss">
  .row{
    padding: 5px 10px;
    width: 100%;
    margin-bottom: 10px;
    .title{
      display: flex;
      flex-direction: row;
      align-items: center;
      font-size: 16px;
      font-weight: bold;
      margin-bottom: 10px;
      h6{
        font-size: 14px;
        font-weight: normal;
        color:#8a8b94;
        margin-right: 5px;
      }
    }
  }
  .dividerVertical{
    display: inline-block;
    width: 5px;
    height: 15px;
    background-color: #1c66f4;
    margin-right: 5px;
  }
  .lineChar{
    width: 45vw;
    height: 400px;
  }
  .monthLineChar{
    width: 70vw;
    height: 400px;
  }
  .barChar{
    width: 90vw;
    height: 400px;
  }
  .titleRow{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 5px;
    width: 100%;
    font-size: 12px;
    font-weight: normal;
    color:#8a8b94;
    .col{
      padding: 0 5px;
    }
  }
  .listRow{
    border:1px solid var(--el-border-color);
    border-radius: 20px;
    height: 40px;
    font-size: 14px;
    font-weight: bold;
    color:#4d515e;
    cursor: pointer;
    margin:8px 0;
    box-shadow:var(--el-box-shadow-light);
  }
  .isSel{
    border:1px solid #2e72e8 !important;
    color: #2e72e8 !important;
  }
  .monthAnalzeRow{
    max-height: 500px;
    overflow: auto;
  }
</style>